<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2:实现类似淘宝首页的图片轮播，五张图片轮流按照顺序显示，1秒切换一次，如果鼠标放在图片上，则停止，鼠标移开，继续轮播；
			下面有5个图片索引，对应五张图片，在图片右下角，显示到第几张，则对应位置的圆点背景色为红色。每张图片都是一个链接</title>
		<style>
			#d {
				list-style-type: none;
				display: flex;
				margin-top: -36px;
				margin-left: 180px;

			}

			button {
				width: 16px;
				height: 16px;
				border-radius: 50%;
				margin-left: 6px;
				border: none;
			}
		</style>

		<script>
			var im = ["imgs/1.jpg", "imgs/2.jpg", "imgs/3.jpg", "imgs/4.jpg", "imgs/5.jpg"];
			var aa = ["https://www.baidu.com", "https://www.360.com", "https://www.bdqn.com",
				"https://www.icbc.com",
				"https://www.abc.com"
			]
			var i = 0;
			var js = setInterval(function() {
				document.getElementById("aw").href = aa[i];
				document.getElementById("aw").children[0].src = im[i];
				i++;
				if (i >= aa.length) {
					i = 0;
				}
			}, 1000);

			function over() {
				clearInterval(js);
			}

			function out() {
				js = setInterval(function() {
					document.getElementById("aw").href = aa[i];
					document.getElementById("aw").children[0].src = im[i];
					i++;
					if (i >= aa.length) {
						i = 0;
					}
				}, 1000);
			}
		</script>
	</head>
	<body>
		<div>
			<a id="aw" href=""><img src="" alt="" onmouseover="over()" onmouseout="out()"></a>
			<ul id="d">
				<li><button></button></li>
				<li><button></button></li>
				<li><button></button></li>
				<li><button></button></li>
				<li><button></button></li>
			</ul>
		</div>
	</body>
</html>
